<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <script th:inline="javascript">
$(function () {
    $("#login-sumbit-id").click(function () {
        var flag = $(".form-control").checkDom()
        if(!flag){
            return
        }
        $("#login-form-id").submit()
    })//end login-sumbit-id

    // 刷新验证码图片的函数
    function refreshCaptcha() {
        var timestamp = new Date().getTime();
        $('#captchaImage').attr('src', /*[[@{/login/captcha}]]*/'' + '?' + timestamp);
    }

    // 页面加载时自动刷新验证码
    refreshCaptcha();
    
    // 点击时刷新验证码
    $('#captchaImage').click(refreshCaptcha);
})//end ready 方法
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img{
            height: 80px
        }

        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }
        body > article{
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section{
            flex-grow: 1;
            display: flex;
        }

        body > article > form{
            flex-basis: 300px;
            margin-right: 30px;
        }

        #login-sumbit-id, #register-link-id {
            width: 100%;
        }

        /* 仅新增这行代码，确保找回密码按钮宽度与其他按钮一致 */
        #forgot-password-link-id {
            width: 100%;
        }

        /* 验证码区域样式 */
        .captcha-group {
            margin-top: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #captchaImage {
            height: 38px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="login-form-id" method="post" action="verification">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$"
            >
        </div>

        <!-- 验证码区域-->
        <div class="form-group captcha-group">
            <span th:text="#{captcha.title}">请输入验证码</span>
            <div style="display: flex; flex-direction: column; gap: 5px; width: 100%;">
                <input type="text" class="form-control" id="captchaInput" name="captcha"
                       th:placeholder="#{captcha.input.placeholder}" placeholder="请输入验证码">
                <img id="captchaImage" th:src="@{/login/captcha}" alt="验证码" title="点击刷新验证码" style="width: 100%;">
            </div>
        </div>

        <a id="login-sumbit-id" class="btn btn-success btn-group-lg" href="#" th:text="#{login.submit}"></a>
        <a id="register-link-id" class="btn btn-success btn-group-lg" style="margin-top: 10px;" th:href="@{/register}" th:text="#{login.register}"></a>
        <!-- 新增找回密码按钮 -->
        <a id="forgot-password-link-id" class="btn btn-success btn-group-lg" style="margin-top: 10px;" th:href="@{/findPassword/page}" th:text="#{login.forgotPassword}"></a>
    </form>
</article>
</body>
</html>
